<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 链接</title>
    <style type="text/css">
        a:link{color: #ff0000}  /*  未被访问的链接 */
        a:visited{color: #00ff00}  /* 已经访问的链接 */
        a:hover{color: #ff00ff} /* 鼠标指针移动到链接上 */
        a:active{color: #0000ff;}  /*正在被点击的链接 要按照目前的这个顺序来写  点击鼠标不用松下就会出现这个颜色 松下跳到指定的链接*/
        /*    修改 链接的访问 */
        a.two:link{color: #ff0000}
        a.two:visited{color: #0000ff}
        a.two:hover{font-size: 150%}

        a.three:link {color:#ff0000;}
        a.three:visited {color:#0000ff;}
        a.three:hover {background:#66ff66;}

        a.four:link {color:#ff0000;}
        a.four:visited {color:#0000ff;}
        a.four:hover {font-family:'微软雅黑';}

        /*  同时设置颜色 和 text-decoration */
        a.five:link {color:#ff0000;text-decoration:none;}
        a.five:visited {color:#0000ff;text-decoration:none;}
        a.five:hover {text-decoration:underline;}

        /*  创建链接框 */
        a.frame:link,
        a.frame:visited{
            display: block;
            font-weight: bold;
            font-size: 0.8em;
            font-family: Verdana, Arial,Helvetica,"sans serif";
            color: #ffffff;
            background-color: #8235bd;
            width: 120px;
            text-align: center;
            padding: 4px;
            text-decoration: line-through;
        }
        a.frame:hover{
            background-color: #F5A623;
        }   /*  如果没有直接跳过 如果没写 那么hover就会使用 active 的背景 在鼠标移到上面的时候  */
        a.frame:active{
            background-color: #7a991a;
        }

    </style>
</head>
<body>
   <p><b><a href="../html/abbr.html">这是一个链接</a></b></p>
   <p><b>注释 :/</b>为了使定义生效, a:hover 必须位于 a:link 和 a:visited 之后!!!</p>
   <p><b>注释 :/</b>为了使定义生效, a:active 必须位于 a:hover 之后!!!</p>

   <p>我们测试一下p元素的属性</p>
   <p><b><a class="one" href="/index.html" target="_blank">这个链接改变颜色</a></b></p>
   <p><b><a class="two" href="/index.html" target="_blank">这个链接改变字体尺寸</a></b></p>
   <p><b><a class="three" href="/index.html" target="_blank">这个链接改变背景</a></b></p>
   <p><b><a class="four" href="/index.html" target="_blank">这个链接改变字体</a></b></p>
   <p><b><a class="five" href="/index.html" target="_blank">这个链接改变文本装饰</a></b></p>
   <p>我们测试一下有框的链接样式</p>

   <p><b><a class="frame" href="/index.html" target="_blank">这是一个有框的链接</a></b></p>

</body>
</html>